Imagen - Avatar en comentarios

A raíz de dejar de funcionar el script de las imágenes del perfil en los comentarios muchas fueron las preguntas buscando una solución, solución que por otra parte a día de hoy ya no me preocupa seguir buscando y el motivo no es otro que la decisión de utilizar la menor cantidad de scripts y por el contrario utilizar las hojas de estilos con más frecuencia.

Hice unos cambios en mis comentarios, añadí un avatar para las visitas y otro distinto para el autor. No es lo mismo a mi me gustaba ver el avatar de cada uno, es como una firma personal, un sello que nos identifica y el mío lo conozco de memoria pero con CSS es la única forma de hacerlo, al menos hasta donde yo sé.

Me preguntaron la forma de hacerlo así que El diario de Crab ahí van las explicaciones.

Para añadir una imagen tipo avatar retiramos antes el icono de Open ID, en Edición de HTML expandimos la plantilla de artilugios y buscaremos:

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

Para sustituirlo por:

<dt class='comment-author' expr:id='data:comment.anchorName'>

Ahora que ya no tenemos el icono añadimos las imágenes. Normalmente una plantilla de Blogger sin modificar nos ofrece un código para los estilos de los comentarios así:

#comments h4 {

margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

}

#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}

#comments-block .comment-author {

margin:.5em 0;

}

#comments-block .comment-body {

margin:.25em 0 0;

}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {

margin:0 0 .75em;

}

.deleted-comment {

font-style:italic;

color:gray;

}

#blog-pager-newer-link {

float: $startSide;

}

#blog-pager-older-link {

float: $endSide;

}

#blog-pager {

text-align: center;

}

.feed-links {

clear: both;

line-height: 2.5em;

}

Respetamos lo marcado en color azul y sustituimos la parte en color rojo por lo siguiente:

.comment-author { /*Nombre - Alias*/

margin:.5em 0 0;

color:#940f04;

padding:0 0 0 20px;

font-weight:bold;

}

.comment-body { /*Texto visitas.*/

margin:0;

font-size: 12px;

color:#ccc;

background: url(url-imagen-de-fondo) ;

margin: 0px 0px 5px 0px;

}

.comment-body p { /*Icono visitas 32x32*/

padding-top: 0px;

padding-left:50px;

padding-right: 10px;

padding-bottom: 35px;

background: url(url-imagen) no-repeat ;

}

.blog-author-comment { /*Texto autor*/

margin:0;

font-size: 12px;

color:#000;

background: url(url-imagen-de-fondo) ;

margin: 0px 0px 5px 0px;

}

.blog-author-comment p { /*Icono autor 32x32*/

padding-top: 0;

padding-bottom: 35px;

padding-left:50px;

padding-right: 10px;

padding-bottom: 35px;

background: url(url-imagen) no-repeat ;

}

.comment-footer {

font-size: 12px;

margin: 0;

padding-top:0px;

text-align: right;

}

.comment-footer a:link {

color:#000;

}

En esos estilos podemos añadir las imágenes, guardamos los cambios y marcamos para expandir la plantilla porque vamos a diferenciar los comentarios de autor de las visitas. Buscamos el siguiente código y añadimos lo que está en negrita.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Naturalmente todos no tenemos las mismas medidas ni espacio en los comentarios, incluso se utilizan distintas clases dependiendo de la plantilla. Por eso recomiendo si alguien quiere probar hacerlo en otro blog.

No es complicado, simplemente se trata de probar con las medias hasta quedar de nuestro agrado.

Al igual que otras veces podemos añadir color o imagen de fondo al espacio destinado al texto del comentario, modificar color del texto y tamaño, añadir bordes y todo lo que la imaginación nos permita hacer.